---
title: Chakra UI + Framer Motion
description: Adding Animation to Chakra UI Components with Framer Motion
tags: ["framer", "animation"]
author: segunadebayo
---

If you'd like to add some interesting motion interaction or animation to your
Chakra UI websites or apps, here's a quick tip:

If you're using a version of `framer motion` less than `v 3.10.0`:

```jsx live=false
import { Box, forwardRef } from "@chakra-ui/react"
import { motion, isValidMotionProp } from "framer-motion"

// 1. Create a custom motion component from Box
const MotionBox = motion.custom(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      // do not pass framer props to DOM element
      Object.entries(props).filter(([key]) => !isValidMotionProp(key)),
    )
    return <Box ref={ref} {...chakraProps} />
  }),
)

// 2. You'll get access to `motion` and `chakra` props in `MotionBox`
function Example() {
  return (
    <MotionBox
      boxSize="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}
```

[![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-motion-box-sbk9e?file=/src/App.tsx)

If you're using the latest verion of `framer motion`, which is `>= v 3.10.0`. In
this version, `framer-motion` automatically filters out motion-related props
forwarded to the provided component.
[Reference](https://www.framer.com/api/motion/component/#custom-components)

```jsx live=false
import { Box, forwardRef } from "@chakra-ui/react"
import { motion } from "framer-motion"

const MotionBox = motion(Box)

function Example() {
  return (
    <MotionBox
      height="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}
```

For TypeScript users, here's what you need to do:

```jsx live=false
import React from "react"
import { HTMLChakraProps, chakra } from "@chakra-ui/react"
import { motion, HTMLMotionProps } from "framer-motion"

type Merge<P, T> = Omit<P, keyof T> & T;
type MotionBoxProps = Merge<HTMLChakraProps<"div">, HTMLMotionProps<"div">>;

export const MotionBox: React.FC<MotionBoxProps> = motion(chakra.div);

function Example() {
  return (
    <MotionBox
      height="40px"
      bg="red.300"
      drag="x"
      dragConstraints={{ left: -100, right: 100 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
    />
  )
}
```

[![Edit with CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/chakra-ui-motion-box-new-drj95?file=/src/App.tsx)
